<template>
  <Modal  title="维护返利类型" :width="500" v-model="model">
    <table width="100%" >
      <colgroup>
        <col width="33%"></col>
        <col width="33%"></col>
        <col width="33%"></col>
      </colgroup>
      <thead>
        <tr>
          <th>类型编号</th>
          <th>类型名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody align="center">
        <tr v-for="(item, index) of list" :key="index">
          <td>{{item.num | num}}</td>
          <!-- @on-blur="isValidName(item)" -->
          <td><Input maxlength="10" v-model="item.name" /></td>
          <td><Button :type="item.status ? 'primary' : 'default'" size="small" @click="onDisabled(item)">{{item.status | status}}</Button></td>
        </tr>
      </tbody>
    </table>
    <div slot="footer" align="center">
      <Button type="primary" @click="onAdd">新增</Button>
      <Button type="primary" @click="onSave">确认</Button>
      <Button type="default" @click="onClose">返回</Button>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
  </Modal>
</template>
<script>
import { mapGetters } from 'vuex'
const setNum = (val) => {
  // 共4位
  let text =  JSON.parse(JSON.stringify(val))
  let length = 4
  // 获取 0
  let getZero = (num) => {
    let numZero = ''
    if (num > 0) {
      for(var i = 0; i < num; i ++) {
        numZero = numZero + '0'
      }
    }
    return numZero
  }
  return getZero(length - `${Number(text)}`.length) + val
  // 拼接具体数值
}
export default {
  data () {
    return {
      model: false,
      list: [{
        num: '1',
        name: '',
        status: true
      }],
      status: 'pass'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.status = 'loading'
      this.$store.dispatch('getFlowTypeList', {}).then(res => {
        this.status = 'pass'
        this.list = res.map(item => {
          return {
            num: Number(item.rebateTypeNo),
            name: item.rebateTypeName,
            status: item.status,
            id: item.id
          }
        })
      })
    },
    isValidName(item) {
      this.$jsonPost('/distributor/rebate/flow/checkRebateTypeName', {rebateTypeName: item.name, id: item.id}).then(res => {
        if (res == false) {
          this.$Notice.success({
            title: `该类型名称已被使用`
          });
        }
      })
    },
    reset() {
      this.model = true
    },
    onAdd() {
      // 新增 1.编号加1 2.新增一个编辑框 3.启用状态
      let num = 1
      if (this.list.length) {
        num = Number(this.list[this.list.length-1].num) + 1
      }
      if (this.isEmpty()) return
      this.list.push({num: num, name: '', status: true})
    },
    isEmpty() {
      let list = this.list.filter(item => !item.name)
      if (list.length) {
        this.$Notice.info({title: '请输入填写类型名称'})
        return true
      }
    },
    onClose() {
      this.model = false
    },
    onSave() {
      let url = '/distributor/rebate/flow/updateOrSaveRebateType'
      // let params = {
      //   rebateFlowTypeDTOS: this.rebateFlowTypeDTOS
      // }
      if (this.isEmpty()) return
      this.status = 'loading'
      this.$jsonPost(url, this.rebateFlowTypeDTOS).then(res => {
        this.status = 'pass'
        this.$Notice.success({
          title: `修改维护返利类型成功`
        });
        this.model = false
      }).catch(res => {
        this.model = false
      })
    },
    onDisabled(row) {
      let text = row.status ? '禁用' : '启用'
      this.$Modal.confirm({
        title: "提醒",
        content: `确定要${text}吗`,
        onOk: () => {
            row.status = row.status ? false : true
            this.$Notice.success({
              title: `${text}成功`
            });
        }
      });
    }
  },
  filters: {
    status(val) {
      return val ? '禁用' : '启用'
    },
    num(val) {
      return setNum(val)
    }
  },
  computed: {
    ...mapGetters([
      'reportFlowTypeList'
    ]),
    rebateFlowTypeDTOS() {
     return this.list.map(item => {
        return {
          status: item.status,
          rebateTypeNo: setNum(item.num),
          rebateTypeName: item.name,
          id: item.id
        }
      })
    }
  }
}
</script>